<template>
  <div class="form-print-container">
    <div class="form-print-header">
      <je-row type="flex" justify="space-between">
        <je-col>
          <span class="print-right-space">
            <label>画布纸张 </label>
            <je-select
              v-model:value="paperType"
              style="width: 150px"
              @change="handleChangePaperType"
            >
              <je-select-option v-for="(item, index) in paperData" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
          </span>
          <span class="print-right-space"
            ><label>宽 </label
            ><je-input-number
              v-model:value="formState2.FUNCINFO_TABLEFORMWIDTH"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              :disabled="paperType !== '自定义'"
              addon-after="mm"
              style="width: 120px"
          /></span>
          <span class="print-right-space"
            ><label>高 </label
            ><je-input-number
              v-model:value="formState2.FUNCINFO_TABLEFORMHEIGHT"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              :disabled="paperType !== '自定义'"
              addon-after="mm"
              style="width: 120px"
          /></span>
          <span class="print-right-space">
            <label><i class="fas fa-flower" style="color: rgb(235, 235, 235)" /> 布局方式 </label>
            <je-select v-model:value="layoutType" style="width: 150px">
              <je-select-option value="1"> 文本 </je-select-option>
              <je-select-option value="2"> 网格 </je-select-option>
            </je-select>
          </span>
          <span class="print-right-space">
            <label style="cursor: pointer"
              ><je-checkbox v-model:checked="formState2.FUNCINFO_ENABLEFORMPRINT" />
              启用打印按钮</label
            >
          </span>
        </je-col>
        <je-col>
          <je-button type="text" @click="handlePreview">
            <span class="button-color"> <i class="fal fa-eye"></i>&nbsp; 预览</span>
          </je-button>
          <je-button type="text" @click="handleReset">
            <span class="button-color">
              <i class="jeicon jeicon-return-restore-o"></i>&nbsp; 复原</span
            >
          </je-button>
          <je-button type="text" @click="handleSubmit">
            <span class="button-color"> <i class="fal fa-save"></i>&nbsp; 保存</span>
          </je-button>
        </je-col>
      </je-row>
    </div>
    <je-panel v-bind="formFieldOptions" ref="formPanel" class="panel">
      <template #left>
        <je-input v-model:value.trim="searchValue" class="search" @pressEnter="getData">
          <template #prefix> <i class="fal fa-search" /> </template>
        </je-input>
        <je-table
          ref="xTable"
          :data="leftData"
          class="table"
          size="mini"
          keep-source
          resizable
          :auto-resize="true"
          show-overflow="ellipsis"
        >
          <je-table-column title="编码" min-width="140">
            <template #default="{ row }">
              <span class="text" @click="handleClickCode(row)">{{ row.RESOURCEFIELD_CODE }}</span>
            </template>
          </je-table-column>
          <je-table-column title="名称" min-width="120">
            <template #default="{ row }">
              <span class="text" @click="handleClickName(row)"> {{ row.RESOURCEFIELD_NAME }}</span>
            </template>
          </je-table-column>
          <je-table-column title="类型" min-width="100">
            <template #default="{ row }">
              <span class="text" @click="handleClickName(row)">
                {{ getLabel(row.RESOURCEFIELD_XTYPE, arrResourceFieldXtype, 'code', 'text') }}
              </span>
            </template>
          </je-table-column>
        </je-table>
      </template>
      <template #default>
        <div class="main-content">
          <div
            class="editorWrap"
            :style="{
              width: formState2.FUNCINFO_TABLEFORMWIDTH
                ? formState2.FUNCINFO_TABLEFORMWIDTH + 'mm'
                : '100%',
            }"
          >
            <je-editor-html
              ref="editor"
              v-model="formState2.FUNCINFO_TABLEFORMTPL"
              width="100%"
              height="100%"
              @init="init"
            />
            <div ref="editBtn" class="editBtn">
              <span class="span" @click="handleEditField">编辑</span>
              <span class="span" @click="handleDelField">删除</span>
            </div>
          </div>
        </div>
      </template>
      <template #right>
        <je-form
          ref="formRef"
          class="right-content"
          :rules="rules"
          :model="formState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false"
          autocomplete="off"
        >
          <je-form-item label="数据源">
            <je-input v-model:value.trim="formState.funcName" disabled />
          </je-form-item>
          <je-form-item label="字段名称">
            <je-input v-model:value.trim="formState.name" disabled />
          </je-form-item>
          <je-form-item label="字段编码">
            <je-input v-model:value.trim="formState.value" disabled />
          </je-form-item>
          <je-form-item label="组件名">
            <je-input
              v-model:value.trim="formState.compName"
              @change="handleChangeField('compName', formState.compName)"
            />
          </je-form-item>
          <je-form-item label="组件宽" name="width">
            <je-input
              v-model:value.trim="formState.width"
              addon-after="px"
              @change="handleChangeField('width', formState.width)"
            />
          </je-form-item>
          <je-form-item label="组件高" name="height">
            <je-input
              v-model:value.trim="formState.height"
              addon-after="px"
              @change="handleChangeField('height', formState.height)"
            />
          </je-form-item>
          <je-form-item label="组件字号" name="fontSize">
            <je-input
              v-model:value.trim="formState.fontSize"
              addon-after="px"
              @change="handleChangeField('fontSize', formState.fontSize)"
            />
          </je-form-item>

          <p class="line"></p>

          <je-form-item label="容器">
            <div class="boxWrap">
              <span
                class="span"
                :class="formState.boxType === 'div' ? 'active' : ''"
                @click="handleChangeField('boxType', 'div')"
                >div</span
              >
              <span
                class="span"
                :class="formState.boxType === 'p' ? 'active' : ''"
                @click="handleChangeField('boxType', 'p')"
                >p</span
              >
              <span
                class="span"
                :class="formState.boxType === 'span' ? 'active' : ''"
                @click="handleChangeField('boxType', 'span')"
                >span</span
              >
            </div>
          </je-form-item>

          <je-form-item label="打印宽" name="printWidth">
            <je-input
              v-model:value.trim="formState.printWidth"
              addon-after="px"
              @change="handleChangeField('printWidth', formState.printWidth)"
            />
          </je-form-item>

          <je-form-item label="打印高" name="printHeight">
            <je-input
              v-model:value.trim="formState.printHeight"
              addon-after="px"
              @change="handleChangeField('printHeight', formState.printHeight)"
            />
          </je-form-item>

          <je-form-item label="打印字号" name="printFontSize">
            <je-input
              v-model:value.trim="formState.printFontSize"
              addon-after="px"
              @change="handleChangeField('printFontSize', formState.printFontSize)"
            />
          </je-form-item>

          <je-form-item label="打印字体">
            <je-select
              v-model:value="formState.printFontSizeFamily"
              allow-clear
              @change="handleChangeField('printFontSizeFamily', formState.printFontSizeFamily)"
            >
              <je-select-option
                v-for="(item, index) in [
                  { text: '宋体', code: '宋体' },
                  { text: '黑体', code: '黑体' },
                  { text: '楷体', code: '楷体' },
                  { text: '隶书', code: '隶书' },
                  { text: '微软雅黑', code: '微软雅黑' },
                ]"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item label="打印样式">
            <div class="boxWrap">
              <span
                class="span"
                :class="formState.printStyle.indexOf('bold') !== -1 ? 'active' : ''"
                @click="handleChangeField('printStyle', 'bold')"
              >
                <i class="fal fa-bold"></i>
              </span>
              <span
                class="span"
                :class="formState.printStyle.indexOf('italic') !== -1 ? 'active' : ''"
                @click="handleChangeField('printStyle', 'italic')"
              >
                <i class="fal fa-italic"></i>
              </span>
              <span
                class="span"
                :class="formState.printStyle.indexOf('underline') !== -1 ? 'active' : ''"
                @click="handleChangeField('printStyle', 'underline')"
              >
                <i class="fal fa-underline"></i>
              </span>
              <span
                class="span"
                :class="formState.printStyle.indexOf('strikethrough') !== -1 ? 'active' : ''"
                @click="handleChangeField('printStyle', 'strikethrough')"
              >
                <i class="fal fa-strikethrough"></i>
              </span>
            </div>
          </je-form-item>

          <je-form-item label="打印颜色">
            <je-color
              v-model:value="formState.printColor"
              @change="handleChangeField('printColor', formState.printColor)"
            />
          </je-form-item>

          <je-form-item label="默认值">
            <je-input
              v-model:value.trim="formState.defaultValue"
              @change="handleChangeField('key', 'value')"
            />
          </je-form-item>

          <je-form-item label="容器样式">
            <div class="custom">
              <i class="fas fa-bolt" style="color: #fac502"></i>
              <span class="text"> 自定义容器样式</span>
            </div>
          </je-form-item>
        </je-form>
      </template>
    </je-panel>

    <je-modal
      v-model:visible="visible"
      width="800px"
      :title="title"
      height="auto"
      :resize="false"
      :maximizable="false"
      cancel-button
      :ok-button="handleClose"
      @close="handleClose"
    >
      <div style="height: 400px" v-html="formState2.FUNCINFO_TABLEFORMTPL"></div>
    </je-modal>
  </div>
</template>

<script>
  import { ref, toRefs, defineComponent, reactive, onMounted, watch } from 'vue';
  import { Row, Col, InputNumber } from 'ant-design-vue';

  import {
    Form,
    Grid,
    Select,
    Color,
    Input,
    Checkbox,
    Button,
    EditorHtml,
    Panel,
    Modal,
  } from '@jecloud/ui';

  import { getData as FieldListGet, formPrintSaveData, formPrintGetDetail } from '@/api/index';

  const RESOURCEFIELD_XTYPE = [
    { code: 'textfield', text: '文本框' },
    { code: 'numberfield', text: '数值框' },
    { code: 'rgroup', text: '单选框' },
    { code: 'cgroup', text: '复选框' },
    { code: 'cbbfield', text: '下拉框' },
    { code: 'textarea', text: '文本域' },
    { code: 'ckeditor', text: 'HTML编辑器' },
    { code: 'textcode', text: '编号' },
    { code: 'uxfilefield', text: '附件' },
    { code: 'uxfilesfield', text: '多附件' },
    { code: 'datefield', text: '日期' },
    // { code: 'rangedatefield', text: '日期区间' },
    { code: 'clocktimefield', text: '时间' },
    // { code: 'rangeclocktimefield', text: '时间区间' },
    { code: 'treessfield', text: '树形选择' },
    { code: 'gridssfield', text: '关联选择' },
    // { code: 'searchfield', text: '查询选择' },
    { code: 'vueuserfield', text: '人员选择' },
    { code: 'childfuncfield', text: '子功能集合' },
    { code: 'colorfield', text: '颜色选择器' },
    { code: 'displayfield', text: '虚拟字段' },
    { code: 'starfield', text: '评星' },
    { code: 'pinyinfield', text: '拼音' },
    // { code: 'barfield', text: '进度条' },
    { code: 'child', text: '子功能' },
    { code: 'fieldset', text: '分组框' },
    // { code: 'imagepickerfield', text: '图片选择器' },
    { code: 'codeeditor', text: '代码编辑器' },
    { code: 'iconfield', text: '图标选择器' },
    { code: 'jsonarrayfield', text: '对象集合' },
    { code: 'workflowhistory', text: '审批记录' },
  ];

  export default defineComponent({
    name: 'FormPrintContainer',
    components: {
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeButton: Button,
      JeCheckbox: Checkbox,
      JeRow: Row,
      JeCol: Col,
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeEditorHtml: EditorHtml,
      JePanel: Panel,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeColor: Color,
      JeModal: Modal,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    setup(props, { emit }) {
      const state = reactive({
        xTable: ref(),
        editor: ref(),
        editBtn: ref(),
        funcId: props.recordData.JE_CORE_FUNCINFO_ID,
        formFieldOptions: {
          left: { split: true, collapsible: true, collapsed: false, size: 360, minSize: 360 },
          right: { split: true, collapsible: true, collapsed: true, size: 300, minSize: 360 },
        },
        paperType: '210*297',
        layoutType: '1',
        searchValue: '',
        arrResourceFieldXtype: RESOURCEFIELD_XTYPE,
        defaultTPL: '',
        formState: {
          funcName: props.recordData.FUNCINFO_FUNCNAME,
          printStyle: [],
        },
        formStateClone: {},
        formState2: {},
        labelCol: {
          span: 6,
        },
        wrapperCol: {
          span: 18,
        },
        rules: {
          width: [{ pattern: '^[0-9]*$', message: '请输入大于等于0的整数' }],
          height: [{ pattern: '^[0-9]*$', message: '请输入大于等于0的整数' }],
          fontSize: [{ pattern: '^[0-9]*$', message: '请输入大于等于0的整数' }],
          printWidth: [{ pattern: '^[0-9]*$', message: '请输入大于等于0的整数' }],
          printHeight: [{ pattern: '^[0-9]*$', message: '请输入大于等于0的整数' }],
          printFontSize: [{ pattern: '^[0-9]*$', message: '请输入大于等于0的整数' }],
        },
        leftData: [],
        defaultLeftData: [],
        paperData: [
          { code: '210*297', text: 'A4', width: '210', height: '297' },
          { code: '297*420', text: 'A3', width: '297', height: '420' },
          { code: '148*210', text: 'A5', width: '148', height: '210' },
          { code: '176*250', text: 'B5', width: '176', height: '250' },
          { code: '297*210', text: '横版A4', width: '297', height: '210' },
          { code: '420*297', text: '横版A3', width: '420', height: '297' },
          { code: '210*148', text: '横版A5', width: '210', height: '148' },
          { code: '250*176', text: '横版B5', width: '250', height: '176' },
          { code: '自定义', text: '自定义' },
        ],
        visible: false,
        title: '表格表单',
      });

      const methods = {
        // 获取字段列表
        getData() {
          const params = {
            tableCode: 'JE_CORE_RESOURCEFIELD',
            j_query: JSON.stringify({
              custom: [
                { code: 'RESOURCEFIELD_FUNCINFO_ID', value: state.funcId, type: '=', cn: 'and' },
                { code: 'RESOURCEFIELD_XTYPE', value: ['fieldset'], type: 'notIn', cn: 'and' },
                {
                  type: 'and',
                  value: [
                    { code: 'RESOURCEFIELD_CODE', value: state.searchValue, type: 'like' },
                    {
                      code: 'RESOURCEFIELD_NAME',
                      value: state.searchValue,
                      type: 'like',
                      cn: 'or',
                    },
                  ],
                },
              ],
              order: [{ code: 'SY_ORDERINDEX', type: 'asc' }],
            }),
            funcId: state.funcId,
          };
          FieldListGet(params).then((res) => {
            state.leftData = res;
            state.defaultLeftData = JSON.parse(JSON.stringify(res));

            methods.resetLeftData(state.formState2.FUNCINFO_TABLEFORMTPL);
          });
        },

        // 获取打印详情
        async getDetail() {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            pkValue: state.funcId,
          };

          await formPrintGetDetail(params)
            .then((res) => {
              let findIndex = state.paperData.findIndex(
                (item) => item.width === res.data.FUNCINFO_TABLEFORMWIDTH,
              );

              if (findIndex !== -1) {
                state.paperType = `${res.data.FUNCINFO_TABLEFORMWIDTH}*${res.data.FUNCINFO_TABLEFORMHEIGHT}`;
                state.formState2.FUNCINFO_TABLEFORMWIDTH = res.data.FUNCINFO_TABLEFORMWIDTH;
                state.formState2.FUNCINFO_TABLEFORMHEIGHT = res.data.FUNCINFO_TABLEFORMHEIGHT;
              } else {
                state.paperType = '210*297';
                methods.handleChangePaperType('210*297');
              }

              state.formState2.FUNCINFO_ENABLEFORMPRINT = res.data.FUNCINFO_ENABLEFORMPRINT === '1';
              state.formState2.FUNCINFO_TABLEFORMTPL = res.data.FUNCINFO_TABLEFORMTPL;

              state.defaultTPL = res.data.FUNCINFO_TABLEFORMTPL;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        getLabel(value, list, valueProp = 'value', labelField = 'label') {
          const item = list.find((item) => item[valueProp] === value);
          return item ? item[labelField] : null;
        },

        handlePreview() {
          state.visible = true;
        },

        handleReset() {
          Modal.message('操作成功', 'success');

          state.formState2.FUNCINFO_TABLEFORMTPL = state.defaultTPL;

          state.formFieldOptions['right'].collapsed = true;
        },

        // 保存
        handleSubmit() {
          const editor = state.editor.getEditor();

          const params = {};
          params.JE_CORE_FUNCINFO_ID = state.funcId;
          params.tableCode = 'JE_CORE_FUNCINFO';
          params._updatefields_ = [];

          Object.keys(state.formState2).forEach((item) => {
            params[item] = state.formState2[item];
            params._updatefields_.push(item);
          });

          params._updatefields_ = params._updatefields_.join(',');

          params.FUNCINFO_ENABLEFORMPRINT = params.FUNCINFO_ENABLEFORMPRINT ? '1' : '0';
          params.FUNCINFO_TABLEFORMTPL = editor.getContent();

          formPrintSaveData(params)
            .then((res) => {
              Modal.message(res.message, 'success');
            })
            .catch((err) => {
              Modal.notice(err.message, 'error');
            });
        },

        handleChangePaperType(val) {
          const findIndex = state.paperData.findIndex((item) => item.code === val);
          state.formState2.FUNCINFO_TABLEFORMWIDTH = state.paperData[findIndex].width;
          state.formState2.FUNCINFO_TABLEFORMHEIGHT = state.paperData[findIndex].height;
        },

        handleClickCode(row) {
          const editor = state.editor.getEditor();

          const div = document.createElement('div');
          div.innerHTML = editor.getContent();
          const input = div.getElementsByClassName(row.RESOURCEFIELD_CODE);

          const html = `<input
            type="button"
            class="${row.RESOURCEFIELD_CODE}"
            name="${row.RESOURCEFIELD_CODE}"
            dataType="${row.RESOURCEFIELD_CODE}"
            value="${row.RESOURCEFIELD_NAME}" />`;

          if (input.length === 0) {
            editor.execCommand('insertHTML', false, html);
          }
        },

        handleClickName(row) {
          const editor = state.editor.getEditor();
          editor.execCommand('insertHTML', false, row.RESOURCEFIELD_NAME);
        },

        handleChangeField(key, value) {
          if (key === 'printStyle') {
            if (state.formState[key].indexOf(value) !== -1) {
              let arr = state.formState[key].filter((item) => item !== value);
              state.formState[key] = arr;
            } else {
              state.formState[key].push(value);
            }
          } else {
            state.formState[key] = value;
          }

          const editor = state.editor.getEditor();
          const div = document.createElement('div');
          div.innerHTML = editor.getContent();

          const input = div.getElementsByClassName(state.formState.name)[0];

          input.style.width = state.formState.width + 'px';
          input.style.height = state.formState.height + 'px';
          input.style.fontSize = state.formState.fontSize + 'px';
          input.setAttribute('value', state.formState.compName);

          input.setAttribute('data-compName', state.formState.compName);
          input.setAttribute('data-width', state.formState.width);
          input.setAttribute('data-height', state.formState.height);
          input.setAttribute('data-fontSize', state.formState.fontSize);
          input.setAttribute('data-boxType', state.formState.boxType);
          input.setAttribute('data-printWidth', state.formState.printWidth);
          input.setAttribute('data-printHeight', state.formState.printHeight);
          input.setAttribute('data-printFontSize', state.formState.printFontSize);
          input.setAttribute('data-printFontSizeFamily', state.formState.printFontSizeFamily);
          input.setAttribute('data-printStyle', state.formState.printStyle.join(','));
          input.setAttribute('data-printColor', state.formState.printColor);
          input.setAttribute('data-defaultValue', state.formState.defaultValue);
          editor.setContent(div.innerHTML);
          state.formState2.FUNCINFO_TABLEFORMTPL = div.innerHTML;

          state.editBtn.style.display = 'none';
        },

        init(event, editor) {
          editor.on('mouseover', (event) => {
            const el = event.srcElement;
            const tagName = el.tagName;
            const type = el.getAttribute('type');
            const name = el.getAttribute('name');
            const value = el.getAttribute('value');
            const width = el.getAttribute('data-width');
            const height = el.getAttribute('data-height');
            const fontSize = el.getAttribute('data-fontSize');
            const boxType = el.getAttribute('data-boxType');
            const printWidth = el.getAttribute('data-printWidth');
            const printHeight = el.getAttribute('data-printHeight');
            const printFontSize = el.getAttribute('data-printFontSize');
            const printFontSizeFamily = el.getAttribute('data-printFontSizeFamily');
            const printStyle = el.getAttribute('data-printStyle');
            const printColor = el.getAttribute('data-printColor');
            const defaultValue = el.getAttribute('data-defaultValue');

            if (tagName.toUpperCase() === 'INPUT' && type === 'button') {
              const rect = el.getBoundingClientRect();
              // editor.editorContainer.firstChild.firstChild.offsetHeight 编辑器 toolbar 的高度
              const top =
                rect.top +
                rect.height +
                editor.editorContainer.firstChild.firstChild.offsetHeight +
                2;
              const left = rect.left;
              state.editBtn.style.top = top + 'px';
              state.editBtn.style.left = left + 'px';
              state.editBtn.style.display = 'block';

              state.formStateClone.name = name || '';
              state.formStateClone.value = value || '';
              state.formStateClone.compName = value || '';
              state.formStateClone.width = width || '';
              state.formStateClone.height = height || '';
              state.formStateClone.fontSize = fontSize || '';
              state.formStateClone.boxType = boxType || 'span';
              state.formStateClone.printWidth = printWidth || '';
              state.formStateClone.printHeight = printHeight || '';
              state.formStateClone.printFontSize = printFontSize || '';
              state.formStateClone.printFontSizeFamily = printFontSizeFamily || '';
              state.formStateClone.printStyle = printStyle ? printStyle.split(',') : [];
              state.formStateClone.printColor = printColor || '';
              state.formStateClone.defaultValue = defaultValue || '';
            }
          });
          editor.on('click', (event) => {
            state.editBtn.style.display = 'none';
            state.formFieldOptions['right'].collapsed = true;
          });
        },

        handleEditField() {
          // 编辑字段时，先通过 formStateClone 获取 formState
          Object.keys(state.formStateClone).forEach((item) => {
            state.formState[item] = state.formStateClone[item];
          });

          state.formFieldOptions['right'].collapsed = false;
        },

        handleDelField() {
          // 删除字段时，先通过 formStateClone 获取 formState
          Object.keys(state.formStateClone).forEach((item) => {
            state.formState[item] = state.formStateClone[item];
          });

          const editor = state.editor.getEditor();
          const div = document.createElement('div');
          div.innerHTML = editor.getContent();

          const input = div.getElementsByClassName(state.formState.name)[0];

          Modal.confirm(`确认删除?`, () => {
            input.parentNode.removeChild(input);

            editor.setContent(div.innerHTML);
            state.formState2.FUNCINFO_TABLEFORMTPL = div.innerHTML;

            state.editBtn.style.display = 'none';
          });
        },

        handleClose() {
          state.visible = false;
        },

        resetLeftData(val) {
          const div = document.createElement('div');
          div.innerHTML = val;

          let arrInput = div.getElementsByTagName('input');
          arrInput = Array.prototype.slice.call(arrInput);

          let arrCode = arrInput.map((item) => item.className);

          // 隐藏的字段不显示
          state.leftData = state.defaultLeftData.filter((item) => {
            let findIndex = arrCode.findIndex((item2) => item2 === item.RESOURCEFIELD_CODE);
            return findIndex === -1;
          });
        },
      };

      watch(
        () => state.formState2.FUNCINFO_TABLEFORMTPL,
        (newVal) => {
          methods.resetLeftData(newVal);
        },
      );

      onMounted(async () => {
        await methods.getDetail();

        methods.getData();
      });

      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less">
  .form-print-container {
    .search {
      .ant-input-clear-icon {
        top: 10px;
      }
    }
    .ant-input-affix-wrapper {
      border-radius: 0;
      border: 1px solid #cccccc;
    }
  }
</style>
<style lang="less" scoped>
  .form-print-container {
    height: 100%;
    position: relative;
    padding: 0 20px;
    .form-print-header {
      height: 32px;
      margin: 4px 0;
      line-height: 1;
      .print-right-space {
        margin-right: 15px;
      }
    }
    .panel {
      height: calc(100% - 40px);
      .search {
        height: 40px;
      }
      .table {
        height: calc(100% - 40px);
        .text {
          display: block;
          cursor: pointer;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .main-content {
        position: absolute;
        top: 0;
        bottom: 40px;
        width: auto !important;
        min-width: 100% !important;
        background: #f2f2f2;
        .editorWrap {
          height: 100%;
          margin: 0 auto;
          position: relative;
          .editBtn {
            display: none;
            position: absolute;
            background: #eef0f1;
            border-radius: 4px;
            .span {
              display: inline-block;
              padding: 5px 10px;
              cursor: pointer;
              font-size: 14px;
              &:nth-child(1) {
                color: #2a6fd0;
              }
              &:nth-child(2) {
                color: #333;
              }
            }
          }
        }
      }
      .right-content {
        display: block;
        width: 100%;
        border: 1px solid #ccc;
        height: 100%;
        padding: 20px 0;
        overflow: auto;
        & > div {
          padding: 0 20px;
        }
        .boxWrap {
          display: flex;
          align-items: center;
          .span {
            margin: 0 10px 0 0;
            padding: 5px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            color: #000;
            cursor: pointer;
            &.active {
              background: #3868ec;
              border: 1px solid #3868ec;
              color: #fff;
            }
          }
        }
        .line {
          border-bottom: 1px solid #ccc;
        }
        .custom {
          display: flex;
          align-items: center;
          .text {
            margin: 0 0 0 10px;
          }
        }
      }
    }
  }
</style>
